<template>
  <div class="Personal">
    <div class="top-bg"></div>
    <div class="per-body">
      <div class="user-info-card w690 flex">
        <div class="user-info-top flex">
          <div class="user-head-img flex">
            <img :src="userHeadImg" alt />
          </div>
          <p class="user-info-desc">这是我的个人简介!!!</p>
        </div>
        <div class="user-info-bottom flex">
          <div class="user-info flex">
            <span class="user-info-name">
              <span class="user-name-span span666">姓名</span>
              <span>Fancy</span>
            </span>
            <span class="user-info-phone">
              <span class="user-phone-span span666">联系方式</span>
              <span>13888888888</span>
            </span>
          </div>
        </div>
      </div>
      <!-- <ul class="user-options-ul w690"> -->
      <!-- </ul> -->
      <van-cell-group inset>
        <van-cell
          :title="item.title"
          is-link
          center
          :icon="item.imgUrl"
          :value="item.value"
          v-for="item in arr"
          :key="item.id"
          @click="goLink(item)"
        />
      </van-cell-group>
    </div>
    <div class="logout-btn w690 flex" @click="logout(true)">
      <span>退出登录</span>
      <!-- {{$store.state.Popup.arr}} -->
    </div>
    <PerFooter></PerFooter>
    <!-- 需要组件强制更新 -->
    <Popup :key="$store.state.Popup.Pkey" context="退出登录"></Popup>
  </div>
</template>

<script>
import userHeadImg from "../../assets/images/Personal/头像男 拷贝 4.png";
import personalImg from "../../assets/images/Personal/Personal information.png";
import img2 from "../../assets/images/Personal/形状 2.png";
import changePwdImg from "../../assets/images/Personal/change Password.png";
import versionImg from "../../assets/images/Personal/版本信息.png";
import clearImg from "../../assets/images/Personal/组 16.png";
import PerFooter from "@/components/common/Footer.vue";
import Popup from "../../components/common/Popup.vue";
export default {
  data() {
    return {
      userHeadImg,
      arr: [
        { id: 0, title: "个人信息", value: "", imgUrl: personalImg ,path:"/userInfo",able:true},
        { id: 1, title: "支付密码", value: "", imgUrl: img2 ,path:"/userInfo",able:false},
        { id: 2, title: "修改密码", value: "", imgUrl: changePwdImg ,path:"/userInfo",able:false},
        { id: 3, title: "版本信号", value: "版本1.0", imgUrl: versionImg ,path:"/userInfo",able:true},
        { id: 4, title: "清楚缓存", value: "", imgUrl: clearImg ,path:"/userInfo",able:false},
      ],
    };
  },
  components: {
    PerFooter,
    Popup
  },
  methods: {
    logout(bool) {
      this.$store.commit('Popup/showPopup', bool)
    },
    goLink(item){
      if(!item.able) return this.$toast.fail("功能未开放")
      this.$router.push(item.path);
    }
  }
};
</script>
 
<style lang="less" scoped>
.Personal {
  background-color: #f5f5f5;
  height: 100vh;

  .top-bg {
    width: 100vw;
    height: 4.133333rem;
    background-color: #1f4ca2;
  }
  .per-body {
    position: relative;
    top: -1.6rem;
  }
  .user-info-card {
    height: 3.866667rem;
    background-color: #fff;
    border-radius: 0.133333rem;
    margin: auto;
    position: relative;
    padding: 0 0.4rem;
    box-sizing: border-box;
    flex-flow: column;
    margin-bottom: 0.266667rem;
    .user-info-top {
      height: 2.533333rem;
      position: relative;
      border-bottom: 0.013333rem dashed #ccc;
      justify-content: center;
      .user-head-img {
        width: 2.8rem;
        height: 2.8rem;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.2);
        justify-content: center;
        align-items: center;
        padding-bottom: 0.4rem;

        img {
          width: 2.6rem;
          height: 2.6rem;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
        }
      }
      .user-info-desc {
        position: absolute;
        bottom: 0.266667rem;
        text-align: center;
      }
    }

    .user-info-bottom {
      width: 100%;
      flex: 1;
      .user-info {
        justify-content: space-between;
        align-items: center;
        flex: 1;
        font-size: 0.346667rem;
        .span666 {
          color: #666;
          margin-right: 0.4rem;
        }
      }
    }
  }

  .van-cell-group {
    width: 9.2rem;
    margin: auto;
    border-radius: 0.133333rem;
    .van-cell {
      height: 1.2rem;
      .van-icon {
        margin: 0 0.266667rem;
        img {
          width: 0.4rem;
          height: 0.4rem;
        }
      }
    }
  }
  .logout-btn {
    background-color: #e9e9e9;
    margin: auto;
    justify-content: center;
    align-items: center;
    height: 86px;
    border-radius: 10px;
    span {
      font-size: 30px;
    }
  }
}
</style>